import React, { Component } from 'react';
import { Grid, Select, Search, DatePicker } from '@alifd/next';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api.js';

const { Row, Col } = Grid;
const { RangePicker } = DatePicker;
export default class chooseHead extends Component {
  static displayName = 'Overview';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      filterData: {},
      GoodsTypeList: [], // 商品类别
      VipTypeList: [], // 会员类别
    };
  }
   // 获取会员类型列表
   getVipTypeList= () => {
     service({
       method: 'get',
       url: api.VipTypeList,
     })
       .then((res) => {
         const data = res.data.list;
         const VipTypeList = [];
         if (data.length !== 0) {
           data.forEach((item) => {
             let obj = {};
             obj = { label: item.type_name, value: item.id };
             VipTypeList.push(obj);
           });
         }
         this.setState(
           {
             VipTypeList,
           }
         );
       });
   }
   componentDidMount() {
     this.getVipTypeList();
   }
  handleFormChange = (value) => {
    this.setState(
      {
        filterData: value,
      }, () => {
        this.props.filterChange(this.state.filterData);
      }
    );
  };

  render() {
    const { VipTypeList, filterData } = this.state;
    return (
      <div style={styles.overview}>
        <PageHead title="会员信息筛选筛选" />
        <IceContainer style={styles.alignRight}>
          <IceFormBinderWrapper vlaue={filterData} onChange={this.handleFormChange}>
            <div style={styles.col}>
              <p style={styles.SelectLabel}>会员类型</p>
              <IceFormBinder name="member_type">
                <Select
                  dataSource={VipTypeList}
                  placeholder="请选择会员类型"
                  size="large"
                  autoWidth
                  style={styles.Select}
                  hasClear
                />
              </IceFormBinder>
            </div>
            <div style={styles.col}>
              <p style={styles.SelectLabel}>注册时间</p>
              <IceFormBinder name="time">
                <RangePicker
                  placeholder="请选择时间范围"
                  size="large"
                  style={styles.date}
                />
              </IceFormBinder>
            </div>
            <div style={styles.col}>
              <IceFormBinder name="search">
                <Search type="normal" placeholder="请输入姓名或手机号" size="medium" style={styles.search} />
              </IceFormBinder>
            </div>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'left',
    width: '200px',
    height: '38px',
  },
  date: {
    float: 'left',
    height: '38px',
    width: '300px',
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'left',
    minWidth: '60px',
  },
  search: {
    width: '300px',
    float: 'left',
  },
  row: {
    marginBottom: '20px',
  },
  input: {
    float: 'left',
  },
  col: {
    margin: '10px 20px 10px 0',
    float: 'left',
  },
};
